<template>
    <div>
        <el-container>
            <!-- <el-header class="header" style="height: 100px;background-color: rgba(0, 0, 0, .5);">
                <div class="center">
                    <img src="@/assets/image/logo.png">
                </div>
            </el-header> -->
            <el-container class="box" v-loading="loading">
                <el-aside class="left" width="260px">
                    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                        default-active="1" text-color="#fff" @open="handleOpen" @close="handleClose"
                        @select="handleSelect" style="height: 100%;">
                        <div style="text-align: center;padding: 10px 0;">
                            <img src="@/assets/image/logo.png">
                        </div>
                        <el-menu-item index="1">
                            <span>景点管理</span>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <span>美食管理</span>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <span>轮播图管理</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <span>用户反馈</span>
                        </el-menu-item>
                        <el-menu-item index="5">
                            <span>评论审核</span>
                        </el-menu-item>
                    </el-menu>

                </el-aside>
                <el-main class="right">
                    <div v-if="currentView === '1'">
                        <div class="itembox">
                            <el-button type="primary" @click="addAttractions = true">添加景点</el-button>
                            <el-table :data="attractions" style="width: 100%;margin-top: 10px;">
                                <el-table-column label="景点id" width="180" property="attractionId" />
                                <el-table-column property="name" label="景点名称" width="200" />
                                <el-table-column property="address" label="景点地点" width="320" />
                                <el-table-column label="开放时间" width="180" property="openTime" />
                                <el-table-column label="操作">
                                    <template #default="scope">
                                        <el-button size="small" @click="editAttractions(scope.$index, scope.row)">
                                            编辑
                                        </el-button>

                                        <el-button size="small" type="danger"
                                            @click="delectAttractions(scope.$index, scope.row)">
                                            删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <div v-else-if="currentView === '2'">
                        <div class="itembox">
                            <el-button type="primary" @click="addCuisines = true">添加美食</el-button>
                            <el-table :data="cuisines" style="width: 100%;margin-top: 10px;">
                                <el-table-column label="美食id" width="180" property="cuisineId" />
                                <el-table-column property="name" label="美食名称" width="200" />
                                <el-table-column property="address" label="美食地点" width="320" />
                                <el-table-column label="开放时间" width="180" property="openTime" />
                                <el-table-column label="操作">
                                    <template #default="scope">
                                        <el-button size="small" @click="editCuisines(scope.$index, scope.row)">
                                            编辑
                                        </el-button>
                                        <el-button size="small" type="danger"
                                            @click="delectCuisines(scope.$index, scope.row)">
                                            删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <div v-else-if="currentView === '3'">
                        <div class="itembox">
                            <el-button type="primary" onclick="banner1.click()">添加图片</el-button>
                            <input type="file" id="banner1" style="display: none;" @change="uploadBanner">
                            <el-table :data="banners" style="width: 100%;margin-top: 10px;">
                                <el-table-column label="id" width="180" property="id" />
                                <el-table-column label="图片" width="500" style="">
                                    <template #default="scope">
                                        <img :src="scope.row.url" style="width: 400px;" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template #default="scope">
                                        <el-button size="small" type="danger"
                                            @click="deleteBanner(scope.$index, scope.row)">
                                            删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <div v-else-if="currentView === '4'">
                        <user-feedback @handleLoading="handleLoading"></user-feedback>
                    </div>
                    <div v-else-if="currentView === '5'">
                        <comment-check @handleLoading="handleLoading"></comment-check>
                    </div>
                </el-main>
                <!-- 添加景点遮罩 -->
                <el-drawer v-model="addAttractions" title="I am the title" :with-header="false" direction="btt"
                    size="80%" @open="openAttraction" @close="close()">

                    <div style="width: 700px;margin:0 auto;">
                        <el-form ref="formRef" label-width="220px">
                            <el-form-item label="景点名称" prop="name">
                                <el-input v-model="attractionSave.attractions.name" placeholder="请输入景点名称"></el-input>
                            </el-form-item>
                            <el-form-item label="景点图片" prop="name">
                                <input type="file" name="image" @change="handleFileChange">
                                <div v-for="(url, index) in attractionSave.urls" :key="index">
                                    <!-- 显示图片，使用 :src 绑定图片的 URL -->
                                    <img :src="url" alt="图片" style="width: 200px; height: auto; margin: 10px;" />
                                </div>
                            </el-form-item>
                            <el-form-item label="地址" prop="address">
                                <el-input v-model="attractionSave.attractions.address" placeholder="请输入地址"></el-input>
                            </el-form-item>
                            <el-form-item label="简介" prop="description">
                                <el-input v-model="attractionSave.attractions.description" type="textarea"
                                    placeholder="请输入简介"></el-input>
                            </el-form-item>
                            <el-form-item label="是否热门" prop="isHot">
                                <el-switch v-model="attractionSave.attractions.isHot" active-text="是"
                                    inactive-text="否"></el-switch>
                            </el-form-item>
                            <el-form-item label="是否维护" prop="isHot">
                                <el-switch v-model="attractionSave.attractions.isMaintenance" active-text="是"
                                    inactive-text="否"></el-switch>
                            </el-form-item>
                            <el-form-item label="开放时间" prop="openTime">
                                <el-input v-model="attractionSave.attractions.openTime"
                                    placeholder="请输入开放时间"></el-input>
                            </el-form-item>
                            <el-form-item label="门票价格" prop="ticketPrice">
                                <el-input v-model="attractionSave.attractions.ticketPrice"
                                    placeholder="请输入门票价格"></el-input>
                            </el-form-item>
                            <el-form-item label="联系电话" prop="phoneNumber">
                                <el-input v-model="attractionSave.attractions.phoneNumber"
                                    placeholder="联系电话"></el-input>
                            </el-form-item>
                            <Map ref="childData" :key="timer"></Map>
                            <el-button type="primary" @click="location()">确定位置</el-button>
                        </el-form>
                        <div style="margin: 0 auto; width: 200px;">
                            <el-button @click="addAttractions = false">取消</el-button>
                            <el-button type="primary" @click="saveAttractions" v-if="fjtj">添加</el-button>
                            <el-button type="primary" @click="updateAttractions" v-if="!fjtj">修改</el-button>
                        </div>


                    </div>
                </el-drawer>
                <!-- 添加美食遮罩 -->
                <el-drawer v-model="addCuisines" @open="openCuisines" @close="close()" title="I am the title" :with-header="false"
                    direction="btt" size="80%">
                    <div style="width: 700px;margin:0 auto;">
                        <el-form ref="formRef" label-width="220px">
                            <el-form-item label="美食名称" prop="name">
                                <el-input v-model="cuisinesSave.cuisines.name" placeholder="请输入美食名称"></el-input>
                            </el-form-item>
                            <el-form-item label="美食图片" prop="name">
                                <input type="file" name="image" @change="cuisinesChange">
                                <div v-for="(url, index) in cuisinesSave.urls" :key="index">
                                    <!-- 显示图片，使用 :src 绑定图片的 URL -->
                                    <img :src="url" alt="图片" style="width: 200px; height: auto; margin: 10px;" />
                                </div>
                            </el-form-item>
                            <el-form-item label="地址" prop="address">
                                <el-input v-model="cuisinesSave.cuisines.address" placeholder="请输入地址"></el-input>
                            </el-form-item>
                            <el-form-item label="简介" prop="description">
                                <el-input v-model="cuisinesSave.cuisines.description" type="textarea"
                                    placeholder="请输入简介"></el-input>
                            </el-form-item>
                            <el-form-item label="是否热门" prop="isHot">
                                <el-switch v-model="cuisinesSave.cuisines.isHot" active-text="是"
                                    inactive-text="否"></el-switch>
                            </el-form-item>
                            <el-form-item label="营业时间" prop="openTime">
                                <el-input v-model="cuisinesSave.cuisines.openTime" placeholder="请输入营业时间"></el-input>
                            </el-form-item>
                            <el-form-item label="价格" prop="price">
                                <el-input v-model="cuisinesSave.cuisines.price" placeholder="请输入价格"></el-input>
                            </el-form-item>
                            <el-form-item label="联系电话" prop="phoneNumber">
                                <el-input v-model="cuisinesSave.cuisines.phoneNumber" placeholder="联系电话"></el-input>
                            </el-form-item>
                            <Map ref="childData" :key="timer"></Map>
                            <el-button type="primary" @click="locationC()">确定位置</el-button>
                        </el-form>
                        <div style="margin: 0 auto; width: 200px;">
                            <el-button @click="addAttractions = false">取消</el-button>
                            <el-button type="primary" @click="saveCuisines" v-if="mstj">添加</el-button>
                            <el-button type="primary" @click="updateCuisines" v-if="!mstj">修改</el-button>
                        </div>


                    </div>
                </el-drawer>

            </el-container>
        </el-container>
    </div>
</template>

<script>
import req from '@/utils/request';
import { Plus } from '@element-plus/icons-vue'
import UserFeedback from './component/UserFeedback.vue';
import CommentCheck from './component/CommentCheck.vue';
import Map from './component/Map.vue';
export default {
    components: {
        Plus,
        UserFeedback,
        CommentCheck,
        Map,
    },
    // 定义组件的数据
    data() {
        return {
            // 当前视图的索引，初始值为 '1'
            currentView: '1',
            // 景点信息数组，初始为空数组
            attractions: [],
            // 美食信息数组，初始为空数组
            cuisines: [],
            // 横幅信息数组，初始为空数组
            banners: [],
            // 是否显示添加景点信息的标志，初始为 false
            addAttractions: false,
            // 是否显示添加美食信息的标志，初始为 false
            addCuisines: false,
            // 是否显示添加横幅信息的标志，初始为 false
            addBanners: false,
            // 景点信息表单数据，初始为空字符串或布尔值
            attractionSave: {
                attractions: {
                    name: '',
                    address: '',
                    description: '',
                    isHot: false,
                    isMaintenance: false,
                    commentCount:0,
                    likeCount:0,
                    openTime: '',
                    ticketPrice: '',
                    phoneNumber: '',
                    jd:0,
                    wd:0,
                },
                urls: []
            },
            cuisinesSave: {
                cuisines: {
                    name: '',
                    address: '',
                    description: '',
                    isHot: false,
                    openTime: '',
                    price: '',
                    phoneNumber: '',
                    commentCount:0,
                    likeCount:0,
                    jd:0,
                    wd:0,
                },
                urls: []
            },
            //加载
            loading: false,
            //添加编辑按钮
            fjtj: true,
            mstj: true,
            updateAttractionsId: 0,
            updateCuisinesId: 0,
        };
    },
    // 组件挂载后执行的钩子函数
    mounted() {
        // 获取景点信息列表
        req.get("/attractions/list", {}).then(res => {
            this.attractions = res.data;
        });
        // 获取美食信息列表
        req.get("/cuisines/list", {}).then(res => {
            this.cuisines = res.data;
        });
        // 获取横幅信息列表
        req.get("/banner/list", {}).then(res => {
            this.banners = res.data;
        });
    },
    // 定义组件的方法
    methods: {
        // 2秒加载
        handleLoading() {
            this.loading = true;
            setTimeout(() => {
                this.loading = false;
                location.reload();
            }, 1000);
        },
        // 处理选择事件，更新当前视图的索引
        handleSelect(index) {
            this.currentView = index;
        },
        // 处理文件选择事件，上传图片并更新图片 URL 数组
        handleFileChange(event) {
            req.postupload("/file/upload/image", { "image": event.target.files[0] }).then(res => {
                // 将上传后的图片 URL 添加到 urls 数组中
                this.attractionSave.urls.push(res.data);
            });
        },
        openAttraction() {
            this.timer = new Date().getTime()
            this.attractionSave = { attractions: { name: '', address: '', description: '', isHot: false, isMaintenance: false, openTime: '', ticketPrice: '' }, urls: [] };
        },
        // 添加景点
        saveAttractions() {
            if (this.attractionSave.attractions.name == '') {
                return alert("景点名称不能为空");
            }
            req.post("/attractions/saves", { "attractions": this.attractionSave.attractions, "urls": this.attractionSave.urls }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.addAttractions = false;
                    this.attractionSave = { attractions: { name: '', address: '', description: '', isHot: false, isMaintenance: false, openTime: '', ticketPrice: '' }, urls: [] };
                    this.$message({
                        message: '添加成功',
                        type: 'warning'
                    });
                    this.$refs.childData.close()
                    this.handleLoading();
                }
            })
        },
        // 删除景点
        delectAttractions(index, row) {
            req.delete("/attractions/remove/" + row.attractionId).then(res => {
                this.handleLoading();
            })


        },
        // 编辑景点
        editAttractions(index, row) {
            this.fjtj = false;
            this.addAttractions = true;
            // console.log(index, row.attractionId);
            this.updateAttractionsId = row.attractionId;
            req.get("/attractions/getInfo/" + row.attractionId).then(res => {
                this.attractionSave.attractions = res.data.attractions;
            })
        },
        updateAttractions() {
            req.put("/attractions/update", {
                "attractionId": this.updateAttractionsId,
                "name": this.attractionSave.attractions.name,
                "address": this.attractionSave.attractions.address,
                "description": this.attractionSave.attractions.description,
                "isHot": this.attractionSave.attractions.isHot,
                "isMaintenance": this.attractionSave.attractions.isMaintenance,
                "openTime": this.attractionSave.attractions.openTime,
                "ticketPrice": this.attractionSave.attractions.ticketPrice
            }).then(res => {
                this.handleLoading();

            })
        },
        // 美食操作
        // 美食图片
        cuisinesChange() {
            req.postupload("/file/upload/image", { "image": event.target.files[0] }).then(res => {
                // 将上传后的图片 URL 添加到 urls 数组中
                this.cuisinesSave.urls.push(res.data);
            });
        },
        openCuisines() {
            this.timer = new Date().getTime()
            this.cuisinesSave = { cuisines: { name: '', address: '', description: '', isHot: false, openTime: '', ticketPrice: '' }, urls: [] };
        },
        // 添加美食
        saveCuisines() {
            req.post("/cuisines/saves", { "cuisines": this.cuisinesSave.cuisines, "urls": this.cuisinesSave.urls }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.addCuisines = false;
                    this.cuisinesSave = { cuisines: { name: '', address: '', description: '', isHot: false, openTime: '', ticketPrice: '' }, urls: [] };
                    this.$message({
                        message: '添加成功',
                        type: 'warning'
                    });
                    this.$refs.childData.close()
                    this.handleLoading();
                }
            })
        },
        // 删除美食
        delectCuisines(index, row) {
            this.loading = true
            req.delete("/cuisines/remove/" + row.cuisineId).then(res => {
                setTimeout(() => {
                    this.loading = false;
                    location.reload();
                }, 1000);
            })


        },
        // 编辑美食
        editCuisines(index, row) {
            this.mstj = false;
            this.addCuisines = true;
            // console.log(index, row.cuisineId);
            this.updateCuisinesId = row.cuisineId;
            req.get("/cuisines/getInfo/" + row.cuisineId).then(res => {
                this.cuisinesSave.cuisines = res.data.cuisines;
                // console.log('res :>> ', res.data);
            })
        },
        updateCuisines() {
            req.put("/cuisines/update", {
                "cuisineId": this.updateCuisinesId,
                "name": this.cuisinesSave.cuisines.name,
                "address": this.cuisinesSave.cuisines.address,
                "description": this.cuisinesSave.cuisines.description,
                "isHot": this.cuisinesSave.cuisines.isHot,
                "openTime": this.cuisinesSave.cuisines.openTime,
                "ticketPrice": this.cuisinesSave.cuisines.ticketPrice
            }).then(res => {
                this.handleLoading();
            })
        },
        // 删除轮播图
        deleteBanner(index, row) {
            console.log('row :>> ', row);
            req.delete("/banner/remove/" + row.id).then(res => {
                this.handleLoading();
            })


        },
        // 上传轮播图
        uploadBanner(event) {
            req.postupload("/banner/upload/image", { "image": event.target.files[0] }).then(res => {
                this.handleLoading();
            });
        },
        // 获取经纬度
        location() {
            console.log(this.$refs["childData"].form);
            var jwd = this.$refs["childData"].form;
            this.attractionSave.attractions.jd = jwd.lng;
            this.attractionSave.attractions.wd = jwd.lat;
        },
        locationC() {
            console.log(this.$refs["childData"].form);
            var jwd = this.$refs["childData"].form;
            this.cuisinesSave.cuisines.jd = jwd.lng;
            this.cuisinesSave.cuisines.wd = jwd.lat;
        },
        close(){
            // this.$refs.childData.close()
        }
    }
};
</script>

<style lang="scss" scoped>
.example-showcase .el-loading-mask {
    z-index: 9;
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
    height: 100%;
}

.header {}

.box {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
}

.left {}

.right {
    padding: 0 40px;
    background-color: #F1F2F6;

}

.itembox {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
}

.center {
    width: 1200px;
    margin: 0 auto;
    // background-color: #646f74;
}
</style>